<template>
    <div class="bookinfo">
        <div class="thumb">
            <img  :src="info.image" 
                  class="back"
                  mode="aspectFill"
            >
            <img :src="info.image"
             class="img"
             mode="aspectFit"
            >
            <div class="info">
                <div class="title">{{ info.title }}</div>
                <div class="author">{{ info.author }}</div>
            </div>
        </div>
        <div class="detail">
            <img :src="userinfo.image" class="avatar">
            {{ userinfo.name }}
            <div class="right text-primary">
                {{ info.rate }}分
                <Rate :value='info.rate'></Rate>
            </div>
        </div>
        <div class="detail">
            {{ info.publisher }}
            <div class="right">
                {{ info.price }}
            </div>
        </div>
        <div class="tags">
            <div class="badge" v-for="tag in info.tags" :key="tag">{{ tag }}</div>
        </div>
        <div class="summary">
            <p v-for="(sum,i) in info.summary" :key="i">{{ sum }}</p>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import Rate from '@/components/Rate'

export default {
  data () {
    return {

    }
  },
  props: ['info'],
  components: {
    Rate
  },
  computed: {
    userinfo () {
      return this.info.user_info || {}
    }
  }
}
</script>

<style scoped lang="scss">
.bookinfo {
    font-size: 28rpx;
    .right {
        float: right;
    }
    .detail {
        padding: 5px 10px;
        .avatar{
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            vertical-align: middle;
        }
    }
    .thumb{
        width: 750rpx;
        height: 500rpx;
        overflow: hidden;
        position: relative;
        .back {
            filter: blur(15px);
            width: 100%;
        }
        .img {
            position: absolute;
            width: 100%;
            height: 300rpx;
            left: 0;
            top: 30rpx;
        }
        .info {
            position: absolute;
            color: white;
            width: 100%;
            left: 0;
            top: 330rpx;
            text-align: center;
            .title {
                font-size: 40rpx;
            }
            .author {
                font-size: 28rpx;
            }
        }
    }
    .badge{
        display: inline-block;
        margin: 5px;
        padding: 5px;
        border-radius: 10px; 
        border: 1px solid #ea5a49;
        color: #ea5a49;
    }
    .summary {
        padding: 0 15px;
        margin-top: 10px;
        p {
            text-indent: 2em;
            font-size: 28rpx;
        }
    }
}
</style>
